<template>
  <div>
    <el-container>
      <el-header>
        <img
          src="../../assets/logo.png"
          alt=""
          style="height: 30px; margin-top: 20px"
        />
        <h2 style="text-align: center; margin-top: -35px; color: #409eff">
          在职人员信息完善
        </h2>
      </el-header>
      <el-main style="margin-top: 10px">
        <el-row>
          <el-steps :active="active" align-center>
            <el-step title="个人信息"></el-step>
            <el-step title="任职信息"></el-step>
            <el-step title="其他信息"></el-step>
            <el-step title="完成"></el-step> </el-steps
        ></el-row>
      </el-main>
    </el-container>
    <el-container style="margin-top: -45px">
      <el-main v-if="active == 1">
        <h4>个人基本信息</h4>
        <el-form
          class="margin-top"
          border
          label-width="130px"
          :rules="rules"
          ref="ruleForm"
          :model="form"
        >
          <el-form-item prop="name">
            <template slot="label">
              <i class="el-icon-user"></i>
              姓名
            </template>
            <el-input
              v-model="form.name"
              style="width: 50%"
              :disabled="true"
            ></el-input>
          </el-form-item>

          <el-form-item prop="sex">
            <template slot="label">
              <i class="el-icon-user-solid"></i>
              性别
            </template>
            <el-radio-group v-model="form.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item prop="idcardnum">
            <template slot="label">
              <i class="el-icon-bank-card"></i>
              身份证号
            </template>
            <el-input
              v-model="form.idcardnum"
              style="width: 100%"
              placeholder="请输入身份证号"
            ></el-input>
          </el-form-item>

          <el-form-item prop="idcardaddress">
            <template slot="label">
              <i class="el-icon-s-home"></i>
              身份证住址
            </template>
            <el-input
              v-model="form.idcardaddress"
              type="textarea"
              style="width: 100%"
              placeholder="请输入身份证住址"
            ></el-input>
          </el-form-item>

          <el-form-item prop="address">
            <template slot="label">
              <i class="el-icon-s-home"></i>
              通讯地址
            </template>
            <el-input
              v-model="form.address"
              type="textarea"
              style="width: 100%"
              placeholder="请输入通讯地址"
            ></el-input>
            <span style="color: crimson"
              >请确保有效、真实，如有变动请立即联系人力资源部更新</span
            >
          </el-form-item>

          <el-form-item prop="nation">
            <template slot="label">
              <i class="el-icon-user-solid"></i>
              民族
            </template>
            <el-select
              v-model="form.nation"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="汉族" value="汉族"></el-option>
              <el-option label="蒙古族" value="蒙古族"></el-option>
              <el-option label="彝族" value="彝族"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="marry">
            <template slot="label">
              <i class="el-icon-postcard"></i>
              婚姻状况
            </template>
            <el-radio-group v-model="form.marry">
              <el-radio label="已婚"></el-radio>
              <el-radio label="未婚"></el-radio>
              <el-radio label="离异"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item prop="political">
            <template slot="label">
              <i class="el-icon-user"></i>
              政治面貌
            </template>
            <el-select
              v-model="form.political"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="群众" value="群众"></el-option>
              <el-option label="中共党员" value="中共党员"></el-option>
              <el-option label="共青团员" value="共青团员"></el-option>
              <el-option label="民主党派" value="民主党派"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="jiguan">
            <template slot="label">
              <i class="el-icon-s-home"></i>
              籍贯
            </template>
            <el-input
              v-model="form.jiguan"
              style="width: 100%"
              placeholder="以户籍信息为准"
            ></el-input>
          </el-form-item>

          <el-form-item prop="mobile">
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              联系电话
            </template>
            <el-input
              v-model="form.mobile"
              style="width: 100%"
              type="number"
              placeholder="请输入手机"
            ></el-input>
          </el-form-item>

          <el-form-item prop="email">
            <template slot="label">
              <i class="el-icon-message"></i>
              非公司邮箱
            </template>
            <el-input
              v-model="form.email"
              style="width: 100%"
              placeholder="请输入非公司邮箱"
            ></el-input>
          </el-form-item>

          <el-form-item prop="title">
            <template slot="label">
              <i class="el-icon-suitcase"></i>
              职称
            </template>
            <el-input
              v-model="form.title"
              style="width: 100%"
              placeholder="请输入，多个内容请以逗号隔开"
            ></el-input>
          </el-form-item>

          <el-form-item prop="pq">
            <template slot="label">
              <i class="el-icon-suitcase-1"></i>
              职业资格
            </template>
            <el-input
              v-model="form.pq"
              style="width: 100%"
              placeholder="请输入，多个内容请以逗号隔开"
            ></el-input>
          </el-form-item>

          <el-form-item prop="hobby">
            <template slot="label">
              <i class="el-icon-star-on"></i>
              爱好特长
            </template>
            <el-input
              v-model="form.hobby"
              style="width: 100%"
              placeholder="请输入，多个内容请以逗号隔开"
            ></el-input>
          </el-form-item>

          <el-form-item prop="tall">
            <template slot="label">
              <i class="el-icon-tickets"></i>
              身高
            </template>
            <el-input
              v-model="form.tall"
              style="width: 100%"
              type="number"
              placeholder="请输入身高,例:175"
            >
              <template slot="append">cm</template></el-input
            >
          </el-form-item>

          <el-form-item prop="weight">
            <template slot="label">
              <i class="el-icon-tickets"></i>
              体重
            </template>
            <el-input
              v-model="form.weight"
              style="width: 100%"
              type="number"
              placeholder="请输入体重,例:60"
            >
              <template slot="append">kg</template></el-input
            >
          </el-form-item>

          <el-form-item prop="blood">
            <template slot="label">
              <i class="el-icon-s-promotion"></i>
              血型
            </template>
            <el-select
              v-model="form.blood"
              placeholder="请选择血型"
              style="width: 100%"
            >
              <el-option label="A" value="A"></el-option>
              <el-option label="B" value="B"></el-option>
              <el-option label="AB" value="AB"></el-option>
              <el-option label="O" value="O"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="workdate">
            <template slot="label">
              <i class="el-icon-date"></i>
              参加工作日期
            </template>

            <el-date-picker
              v-model="form.workdate"
              type="date"
              placeholder="请选参加工作日期"
              style="width: 100%"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>

          <el-card shadow="never">
            <el-form-item>
              <template slot="label">
                <span style="font-size: 15px; font-weight: bold"
                  >紧急联系人：</span
                >
              </template>
            </el-form-item>

            <el-form-item prop="ec">
              <template slot="label">
                <i class="el-icon-user-solid"></i>
                与本人关系
              </template>
              <el-input
                v-model="form.ec"
                style="width: 100%"
                placeholder="请输入关系，例:夫妻、父子"
              ></el-input>
            </el-form-item>

            <el-form-item prop="ecname">
              <template slot="label">
                <i class="el-icon-user"></i>
                联系人姓名
              </template>
              <el-input
                v-model="form.ecname"
                style="width: 100%"
                placeholder="请输入紧急联系人姓名"
              ></el-input>
            </el-form-item>

            <el-form-item prop="ecmobile">
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                联系人电话
              </template>
              <el-input
                v-model="form.ecmobile"
                style="width: 100%"
                type="number"
                placeholder="请输入紧急联系人电话"
              ></el-input>
            </el-form-item>
          </el-card>

          <el-form-item>
            <el-button
              type="primary"
              @click="updatauserinfo('ruleForm', 2)"
              style="width: 100%; margin-top: 20px"
              >下一步</el-button
            >
          </el-form-item>
        </el-form>
      </el-main>

      <el-main v-if="active == 2">
        <h4>任职基本信息</h4>
        <el-form
          class="margin-top"
          border
          label-width="130px"
          :rules="rules2"
          ref="ruleForm2"
          :model="form"
        >
          <!-- <el-form-item prop="id">
            <template slot="label">
              <i class="el-icon-coin"></i>
              工号
            </template>
            <el-input
              v-model="form.id"
              style="width: 100%"
              :disabled="true"
            ></el-input>
          </el-form-item>

          <el-form-item prop="depid">
            <template slot="label">
              <i class="el-icon-school"></i>
              所属部门
            </template>
            <el-select
              v-model="form.depid"
              placeholder="请选择"
              :disabled="true"
              style="width: 100%"
            >
              <el-option
                v-for="item in selectdepartment"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="post">
            <template slot="label">
              <i class="el-icon-receiving"></i>
              岗位
            </template>
            <el-select
              v-model="form.post"
              placeholder="请选择"
              :disabled="true"
              style="width: 100%"
            >
              <el-option
                v-for="item in selectpost"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item prop="employdate">
            <template slot="label">
              <i class="el-icon-date"></i>
              入职日期
            </template>

            <el-date-picker
              v-model="form.employdate"
              type="date"
              placeholder="请选择入职日期"
              style="width: 100%"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item prop="inductiondate">
            <template slot="label">
              <i class="el-icon-date"></i>
              转正日期
            </template>

            <el-date-picker
              v-model="form.inductiondate"
              type="date"
              placeholder="请选择转正日期"
              style="width: 100%"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <!-- 
          <el-form-item prop="contract_start">
            <template slot="label">
              <i class="el-icon-date"></i>
              合同起始日期
            </template>

            <el-date-picker
              v-model="form.contract_start"
              type="date"
              placeholder="请选择转正日期"
              style="width: 100%"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item prop="contract_end">
            <template slot="label">
              <i class="el-icon-date"></i>
              合同结束日期
            </template>

            <el-date-picker
              v-model="form.contract_end"
              type="date"
              placeholder="请选择转正日期"
              style="width: 100%"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item prop="contract_long">
            <template slot="label">
              <i class="el-icon-folder"></i>
              合同期限
            </template>
            <el-select
              v-model="form.contract_long"
              placeholder="请选择合同期限"
              style="width: 100%"
            >
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
              <el-option label="3" value="3"></el-option>
              <el-option label="5" value="5"></el-option>
              <el-option label="长期" value="长期"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="contract_body">
            <template slot="label">
              <i class="el-icon-folder"></i>
              合同签订主体
            </template>
            <el-select
              v-model="form.contract_body"
              placeholder="请选择合同签订主体"
              style="width: 100%"
            >
              <el-option
                label="东杰智能科技集团股份有限公司"
                value="东杰智能科技集团股份有限公司"
              ></el-option>
              <el-option
                label="太原东杰软件开发有限公司"
                value="太原东杰软件开发有限公司"
              ></el-option>
              <el-option
                label="太原东杰装备有限公司"
                value="太原东杰装备有限公司"
              ></el-option>
              <el-option
                label="东杰智能（深圳）有限公司"
                value="东杰智能（深圳）有限公司"
              ></el-option>
              <el-option
                label="东杰智能科技（江苏）有限公司"
                value="东杰智能科技（江苏）有限公司"
              ></el-option>
              <el-option
                label="东杰智能（山东）有限公司"
                value="东杰智能（山东）有限公司"
              ></el-option>
              <el-option
                label="东上杰智能科技（上海）有限公司"
                value="东上杰智能科技（上海）有限公司"
              ></el-option>
              <el-option
                label="深圳东杰智能研究中心有限公司"
                value="深圳东杰智能研究中心有限公司"
              ></el-option>
              <el-option
                label="深圳中集智能科技有限公司"
                value="深圳中集智能科技有限公司"
              ></el-option>
              <el-option
                label="邦芒服务外包有限公司太原分公司"
                value="邦芒服务外包有限公司太原分公司"
              ></el-option>
              <el-option
                label="山西九广成劳务派遣股份有限公司"
                value="山西九广成劳务派遣股份有限公司"
              ></el-option>
              <el-option
                label="山西众瑞人力资源管理有限公司"
                value="山西众瑞人力资源管理有限公司"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="contract_type">
            <template slot="label">
              <i class="el-icon-folder"></i>
              合同类型
            </template>
            <el-select
              v-model="form.contract_type"
              placeholder="请选择合同类型"
              style="width: 100%"
            >
              <el-option label="劳动合同" value="劳动合同"></el-option>
              <el-option
                label="劳务合同（包含返聘等）"
                value="劳务合同（包含返聘等）"
              ></el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item prop="workplace">
            <template slot="label">
              <i class="el-icon-office-building"></i>
              主要工作地
            </template>
            <el-select
              v-model="form.workplace"
              placeholder="请选择主要工作地"
              style="width: 100%"
            >
              <el-option label="太原" value="太原"></el-option>
              <el-option label="深圳" value="深圳"></el-option>
              <el-option label="常州" value="常州"></el-option>
              <el-option label="淄博" value="淄博"></el-option>
              <el-option label="上海" value="上海"></el-option>
              <el-option label="北京" value="北京"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="isss">
            <template slot="label">
              <i class="el-icon-s-flag"></i>
              是否缴纳社保
            </template>
            <el-radio-group v-model="form.isss">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>

       

          <el-form-item>
            <template slot="label">
              <el-button type="danger" @click="active = 1" style="width: 100%"
                >上一步</el-button
              >
            </template>
            <el-button
              type="primary"
              @click="updatauserinfo('ruleForm2', 3)"
              style="width: 100%"
              >下一步</el-button
            >
          </el-form-item>
        </el-form>
      </el-main>

      <el-main v-if="active == 3">
        <h4>家庭情况（请填写直系亲属）</h4>
        <el-button
          v-if="!editinfo"
          icon="el-icon-plus"
          size="mini"
          @click="addfamily"
        ></el-button>

        <el-table
          :data="family"
          border
          style="width: 100%"
          :header-cell-style="{
            background: '#fafafa',
            color: '#979b9f',
            fontWeight: 'normal',
          }"
        >
          <el-table-column
            prop="name"
            label="姓名"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="relationship"
            label="关系"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="company"
            label="工作机构"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="post"
            label="职务"
            header-align="center"
            align="center"
          >
          </el-table-column>

             <el-table-column
            prop="mobile"
            label="联系电话"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            v-if="!editinfo"
            width="40"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="deletefamily(scope.$index, scope.row)"
                >X</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <h4>教育经历（从最高学历开始填写）</h4>
        <el-button
          v-if="!editinfo"
          icon="el-icon-plus"
          size="mini"
          @click="addedu"
        ></el-button>

        <el-table
          :data="eduexp"
          border
          style="width: 100%"
          :header-cell-style="{
            background: '#fafafa',
            color: '#979b9f',
            fontWeight: 'normal',
          }"
        >
          <el-table-column
            prop="education"
            label="学历层次"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="educationtype"
            label="学历类型"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="educationsn"
            label="学历证书编号"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="degree"
            label="学位层次"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="degreesn"
            label="学位证书编号"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="stime"
            label="入学时间"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="etime"
            label="毕业时间"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="学校名称"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="major"
            label="专业"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            v-if="!editinfo"
            width="40"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="deleteedu(scope.$index, scope.row)"
                >X</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <h4>工作经历（从最近工作开始填写）</h4>
        <el-button
          v-if="!editinfo"
          icon="el-icon-plus"
          size="mini"
          @click="addwork"
        ></el-button>
        <el-table
          :data="workexp"
          border
          style="width: 100%"
          :header-cell-style="{
            background: '#fafafa',
            color: '#979b9f',
            fontWeight: 'normal',
          }"
        >
          <el-table-column
            prop="stime"
            label="入职时间"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="etime"
            label="离职时间"
            header-align="center"
            align="center"
          >
            <template slot-scope="{ row }">
              {{ row.etime == "1000-01-01" ? "至今" : row.etime }}
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="公司名称"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="post"
            label="职位"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            v-if="!editinfo"
            width="40"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="deletework(scope.$index, scope.row)"
                >X</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-row>
          <el-button
            type="danger"
            @click="active = 2"
            style="width: 35%; margin-top: 20px"
            >上一步</el-button
          >

          <el-button
            type="primary"
            @click="active = 4"
            style="width: 58%; margin-top: 20px"
            >下一步</el-button
          >
        </el-row>
      </el-main>
    </el-container>

    <el-container v-if="active == 4">
      <el-main>
        <h3 style="text-align: center; margin-top: 100px">
          您的信息已完善，感谢您的支持
        </h3>
      </el-main>
    </el-container>

    <el-dialog title="教育经历" :visible.sync="eduaddcard" width="100%" left>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="学历层次">
          <el-select
            v-model="eduform.education"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option label="博士研究生" value="博士研究生"></el-option>
            <el-option label="硕士研究生" value="硕士研究生"></el-option>
            <el-option label="大学本科" value="大学本科"></el-option>
            <el-option label="大学专科" value="大学专科"></el-option>
            <el-option label="中等专科" value="中等专科"></el-option>
            <el-option label="职业高中" value="职业高中"></el-option>
            <el-option label="技工学校" value="技工学校"></el-option>
            <el-option label="普通高中" value="普通高中"></el-option>
            <el-option label="初中" value="初中"></el-option>
            <el-option label="小学" value="小学"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="学历类型"
          v-if="
            eduform.education == '博士研究生' ||
            eduform.education == '硕士研究生' ||
            eduform.education == '大学本科' ||
            eduform.education == '大学专科'
          "
        >
          <el-select
            v-model="eduform.educationtype"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              label="普通高等教育（统招）"
              value="普通高等教育（统招）"
            ></el-option>
            <el-option
              label="普通专升本（统招）"
              value="普通专升本（统招）"
            ></el-option>
            <el-option label="成人高考" value="成人高考"></el-option>
            <el-option label="自考" value="自考"></el-option>
            <el-option label="电大" value="电大"></el-option>
            <el-option
              label="网络教育（远程教育）"
              value="网络教育（远程教育）"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="学历证书编号"
          v-if="
            eduform.education == '博士研究生' ||
            eduform.education == '硕士研究生' ||
            eduform.education == '大学本科' ||
            eduform.education == '大学专科'
          "
        >
          <el-input
            v-model="eduform.educationsn"
            style="width: 100%"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="学位层次"
          v-if="
            eduform.education == '博士研究生' ||
            eduform.education == '硕士研究生' ||
            eduform.education == '大学本科' ||
            eduform.education == '大学专科'
          "
        >
          <el-select
            v-model="eduform.degree"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option label="学士" value="学士"></el-option>
            <el-option label="双学士" value="双学士"></el-option>
            <el-option label="第二学士" value="第二学士"></el-option>
            <el-option label="硕士" value="硕士"></el-option>
            <el-option label="博士" value="博士"></el-option>
            <el-option label="名誉博士" value="名誉博士"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="学位证书编号"
          v-if="
            eduform.education == '博士研究生' ||
            eduform.education == '硕士研究生' ||
            eduform.education == '大学本科' ||
            eduform.education == '大学专科'
          "
        >
          <el-input v-model="eduform.degreesn"></el-input>
        </el-form-item>

        <el-form-item label="学校名称">
          <el-input v-model="eduform.name" style="width: 100%"></el-input>
        </el-form-item>

        <el-form-item label="入学时间">
          <el-date-picker
            type="date"
            placeholder="选择入学时间"
            v-model="eduform.stime"
            style="width: 100%"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="毕业时间">
          <el-date-picker
            type="date"
            placeholder="选择毕业时间"
            v-model="eduform.etime"
            style="width: 100%"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

        <el-form-item
          label="专业"
          v-if="
            eduform.education == '博士研究生' ||
            eduform.education == '硕士研究生' ||
            eduform.education == '大学本科' ||
            eduform.education == '大学专科' ||
            eduform.education == '中等专科' ||
            eduform.education == '职业高中' ||
            eduform.education == '技工学校'
          "
        >
          <el-input v-model="eduform.major"></el-input>
        </el-form-item>

        <el-form-item v-if="isadd">
          <el-button type="primary" @click="postedu(0)" style="width: 100%"
            >新增</el-button
          >
        </el-form-item>

        <el-form-item v-if="!isadd">
          <el-button type="primary" @click="postedu(1)" style="width: 100%"
            >修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="工作经历" :visible.sync="workaddcard" width="100%" left>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="入职时间">
          <el-date-picker
            type="date"
            placeholder="选择入职日期"
            v-model="workform.stime"
            style="width: 100%"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="离职时间">
          <el-date-picker
            type="date"
            placeholder="选择离职日期，至今无需填写"
            v-model="workform.etime"
            style="width: 100%"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="公司名称">
          <el-input v-model="workform.name"></el-input>
        </el-form-item>

        <el-form-item label="职位">
          <el-input v-model="workform.post"></el-input>
        </el-form-item>

        <el-form-item v-if="isadd">
          <el-button type="primary" @click="postwork(0)" style="width: 100%"
            >新增</el-button
          >
        </el-form-item>

        <el-form-item v-if="!isadd">
          <el-button type="primary" @click="postwork(1)" style="width: 100%"
            >修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="家庭成员" :visible.sync="familycard" width="100%" left>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="关系">
          <el-select
            v-model="familyform.relationship"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option label="父亲" value="父亲"></el-option>
            <el-option label="母亲" value="母亲"></el-option>
            <el-option label="丈夫" value="丈夫"></el-option>
            <el-option label="妻子" value="妻子"></el-option>
            <el-option label="儿子" value="儿子"></el-option>
            <el-option label="女儿" value="女儿"></el-option>
            <el-option label="兄弟" value="兄弟"></el-option>
            <el-option label="姐妹" value="姐妹"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="姓名">
          <el-input v-model="familyform.name"></el-input>
        </el-form-item>

        <el-form-item label="工作机构">
          <el-input v-model="familyform.company"></el-input>
        </el-form-item>

        <el-form-item label="职务">
          <el-input v-model="familyform.post"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="familyform.mobile"></el-input>
        </el-form-item>

        <el-form-item v-if="isadd">
          <el-button type="primary" @click="postfamily(0)" style="width: 100%"
            >新增</el-button
          >
        </el-form-item>

        <el-form-item v-if="!isadd">
          <el-button type="primary" @click="postfamily(1)" style="width: 100%"
            >修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  async created() {
    this.getDepartment();
    // this.getpost();
    this.getUrlKey();
    this.getUserDetail();
  },

  data() {
    let validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("手机号不能为空！"));
      }

      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("手机号不正确！"));
      } else {
        callback();
      }
    };

    return {
      active: 1,
      id: null,
      selectpost: [],
      selectdepartment: [],

      editinfo: false,
      eduaddcard: false,
      workaddcard: false,
      familycard: false,
      isadd: false,

      form: {},

      familyform: {
        id: "",
        relationship: "",
        company: "",
        post: "",
        mobile: "",
      },

      eduform: {
        id: "",
        stime: "",
        etime: "",
        name: "",
        major: "",
        degree: "",
      },

      workform: { id: "", stime: "", etime: "", name: "", post: "" },
      eduexp: [],
      workexp: [],
      family: [],

      rules: {
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        idcardnum: [
          { required: true, message: "请填写身份证号", trigger: "blur" },
        ],
        idcardaddress: [
          { required: true, message: "请填写身份证地址", trigger: "blur" },
        ],

        address: [
          { required: true, message: "请填写通讯地址", trigger: "blur" },
        ],

        nation: [{ required: true, message: "请选择民族", trigger: "blur" }],

        marry: [
          { required: true, message: "请选择婚姻状况", trigger: "change" },
        ],

        political: [
          { required: true, message: "请选择政治面貌", trigger: "change" },
        ],

        jiguan: [{ required: true, message: "请填写籍贯", trigger: "blur" }],

        mobile: [{ validator: validatePhone, trigger: "blur" }],
        email: [{ required: true, message: "请填写电子邮箱", trigger: "blur" }],

        blood: [{ required: true, message: "请选择血型", trigger: "change" }],

        workdate: [
          { required: true, message: "请选择工作日期", trigger: "change" },
        ],
        ec: [{ required: true, message: "请填写与本人关系", trigger: "blur" }],
        ecname: [
          { required: true, message: "请填写联系人姓名", trigger: "blur" },
        ],
        ecmobile: [
          { required: true, message: "请填写联系人电话", trigger: "blur" },
        ],
      },

      rules2: {
        employdate: [
          { required: true, message: "请选择入职日期", trigger: "change" },
        ],
        // contract_body: [
        //   { required: true, message: "请选择合同签订主体", trigger: "change" },
        // ],
        // contract_type: [
        //   { required: true, message: "请选择合同类型", trigger: "change" },
        // ],
        // contract_long: [
        //   { required: true, message: "请选择合同期", trigger: "change" },
        // ],
        isss: [
          { required: true, message: "请选择是否缴纳社保", trigger: "change" },
        ],
        user_group: [
          { required: true, message: "请选择员工组", trigger: "change" },
        ],
      },
    };
  },

  methods: {
    async getDepartment() {
      this.$axios
        .get(`api/member/getdepartment`)
        .then((response) => {
          this.selectdepartment = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    getpost() {
      this.$axios
        .post("api/member/getpost")
        .then((response) => {
          this.selectpost = response.data;
        })

        .catch(function (error) {
          console.log(error);
        });
    },

    getUrlKey() {
      var url = window.location.href; //获取当前url
      this.nowurl = url;
      var dz_url = url.split("#")[0]; //获取#/之前的字符串
      var cs = dz_url.split("?")[1]; //获取?之后的参数字符串
      var cs_arr = cs.split("&"); //参数字符串分割为数组
      var cs = {};
      for (var i = 0; i < cs_arr.length; i++) {
        //遍历数组，拿到json对象
        cs[cs_arr[i].split("=")[0]] = cs_arr[i].split("=")[1];
      }
      this.id = cs.id;
    },

    async getUserDetail() {
      let id = this.id;
      console.log(id);
      try {
        let res = await this.$axios.get(`api/member/getuserdetail?id=` + id);
        this.form = res.data.member[0];
        this.eduexp = res.data.eduexp;
        this.workexp = res.data.workexp;
        this.family = res.data.family;
      } catch (e) {}
    },

    addfamily() {
      this.familycard = true;
      this.isadd = true;
      this.familyform = [];
    },

    editfamily(row) {
      this.familycard = true;
      this.isadd = false;
      this.familyform = row;
    },

    addedu() {
      this.eduaddcard = true;
      this.isadd = true;
      this.eduform = [];
    },

    editedu(row) {
      this.eduaddcard = true;
      this.isadd = false;
      this.eduform = row;
    },

    addwork() {
      this.workaddcard = true;
      this.isadd = true;
      this.workform = [];
    },

    editwork(row) {
      this.workaddcard = true;
      this.isadd = false;
      this.workform = row;
    },

    async postfamily(type) {
      let datas = {
        type: type,
        userid: this.id,
        relationship: this.familyform.relationship,
        name:this.familyform.name,
        company: this.familyform.company,
        post: this.familyform.post,
        mobile: this.familyform.mobile,
      };
      this.$axios
        .post("api/member/postfamily", datas)
        .then((response) => {
          this.$message({
            message: response.data.msg,
            type: "success",
            center: true,
          });
          if (response.data.msg == "家庭成员添加成功") {
            this.family.push({
              id: response.data.id,
              name:datas.name,
              relationship: datas.relationship,
              company: datas.company,
              mobile: datas.mobile,
              post: datas.post,
            });
          }
          this.familycard = false;
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    async postedu(type) {
      let datas = {
        type: type,
        userid: this.id,
        id: this.eduform.id,
        name: this.eduform.name,
        stime: this.eduform.stime,
        etime: this.eduform.etime,
        degree: this.eduform.degree,
        major: this.eduform.major,
        education: this.eduform.education,
        educationtype: this.eduform.educationtype,
        educationsn: this.eduform.educationsn,
        degreesn: this.eduform.degreesn,
      };
      this.$axios
        .post("api/member/postedu", datas)
        .then((response) => {
          this.$message({
            message: response.data.msg,
            type: "success",
            center: true,
          });
          if (response.data.msg == "教育经历添加成功") {
            this.eduexp.push({
              id: response.data.id,
              stime: datas.stime,
              etime: datas.etime,
              name: datas.name,
              major: datas.major,
              degree: datas.degree,
              education: datas.education,
              educationtype: datas.educationtype,
              educationsn: datas.educationsn,
              degreesn: datas.degreesn,
            });
          }
          this.eduaddcard = false;
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    async postwork(type) {
      let datas = {
        type: type,
        id: this.workform.id,
        userid: this.id,
        name: this.workform.name,
        stime: this.workform.stime,
        etime: this.workform.etime,
        post: this.workform.post,
      };
      this.$axios
        .post("api/member/postwork", datas)
        .then((response) => {
          this.$message({
            message: response.data.msg,
            type: "success",
            center: true,
          });
          if (response.data.msg == "工作经历添加成功") {
            this.workexp.push({
              id: response.data.id,
              stime: datas.stime,
              etime: datas.etime,
              name: datas.name,
              post: datas.post,
            });
          }
          this.workaddcard = false;
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    async deleteedu(index, row) {
      this.$confirm("是删除该条信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let datas = {
            id: row.id,
            userid: this.userid,          
          };
          this.$axios
            .post("api/member/deleteedu", datas)
            .then((response) => {
              this.$message({
                message: response.data.msg,
                type: "success",
                center: true,
              });
              this.eduexp.splice(index, 1);
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    async deletework(index, row) {
      this.$confirm("是删除该条信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          let datas = {
            id: row.id,
            userid: this.userid,
          };
          this.$axios
            .post("api/member/deletework", datas)
            .then((response) => {
              this.$message({
                message: response.data.msg,
                type: "success",
                center: true,
              });
              this.workexp.splice(index, 1);
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(function (error) {
          console.log(error);
        });
    },

       async deletefamily(index, row) {
      this.$confirm("是删除该条信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          let datas = {
            id: row.id,
            userid: this.userid,
            postername: sessionStorage.getItem("name"),
          };
          this.$axios
            .post("api/member/deletefamily", datas)
            .then((response) => {
              this.$message({
                message: response.data.msg,
                type: "success",
                center: true,
              });
              this.family.splice(index, 1);
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    updatauserinfo(formName, active) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let datas = {
            newdata: this.form,
            id: this.id,
          };
          this.$axios
            .post("api/member/updatauserinfo2", datas)
            .then((response) => {
              this.active = active;
              this.userid = response.data;
              console.log(this.userid);
            })
            .catch(function (error) {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    async getUserDetail() {
      let id = this.id;
      try {
        let res = await this.$axios.get(`api/member/getuserdetail?id=` + id);
        this.form = res.data.member[0];
        this.eduexp = res.data.eduexp;
        this.workexp = res.data.workexp;
        this.family=res.data.family;
      } catch (e) {}
    },

    createuserinfo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let datas = {
            newdata: this.form,
          };
          this.$axios
            .post("api/member/createuserinfo", datas)
            .then((response) => {
              this.active = 2;
              this.userid = response.data;
              console.log(this.userid);
            })
            .catch(function (error) {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>